import React,{Component} from 'react'
import ReactPullLoad,{ STATS } from 'react-pullload'
import '../../../node_modules/react-pullload/dist/ReactPullLoad.css'
import './style.less'

export class PullLoad extends Component{
  constructor(){
    super();
    this.state ={
      hasMore: true,
      action: STATS.init,
      screenHeight : 0,//屏幕高度
      index: 5, //loading more test time limit
    }
  }

  componentWillMount(){
    //判断是否是iphonex，型号单独判断
    if (this.props.screenHeight) {
      var screenHeight = this.props.screenHeight
    }else{
      var clientHeight = document.documentElement.clientHeight
      var screenHeight = clientHeight - 64
    }
    if (/iphone/gi.test(navigator.userAgent) && (clientHeight == 812)) {
      screenHeight = clientHeight - 88
    }
    this.setState({
      screenHeight : screenHeight
    })
  }
  handleAction = (action) => {
    console.info(action, this.state.action,action === this.state.action);
    //new action must do not equel to old action
    if(action === this.state.action){
      return false
    }

    if(action === STATS.refreshing){//刷新
      this.handRefreshing();
    } else if(action === STATS.loading){//加载更多
      this.handLoadMore();
    } else{
      //DO NOT modify below code
      this.setState({
        action: action
      })
    }
  }

  handRefreshing = () =>{
    var _this = this;
    if(STATS.refreshing === this.state.action){
      return false
    }
    if (_this.props.handRefreshing) {
      //处理父元素请求事件
      _this.props.handRefreshing(function(){
          _this.setState({
            action: STATS.refreshed
          });
      })
    }

    this.setState({
      action: STATS.refreshing
    })
  }
  componentWillReceiveProps (nextProps) {
      this.setState({
        hasMore: nextProps.hasMore
      });
    }
  handLoadMore = () => {
    var _this = this;
    if(STATS.loading === this.state.action){
      return false
    }
    if (_this.props.handLoadMore) {
      //处理父元素请求事件
      _this.props.handLoadMore(function(hasMore){
          _this.setState({
            action: STATS.reset,
          });
      })
    }

    // setTimeout(() =>{
    //   if(this.state.index === 0){
    //     this.setState({
    //       action: STATS.reset,
    //     });
    //   } else{
    //     this.setState({
    //       action: STATS.reset,
    //       index: this.state.index - 1
    //     });
    //   }
    // }, 3000)

    this.setState({
      action: STATS.loading
    })
  }
  
  render(){
    const {
      data, 
      hasMore
    } = this.state
    
    
    return (
      <div>
        <div className='fixHeaderStyle' className={this.props.headerClass}>
          {/*fixed header    */}
        </div>
        <ReactPullLoad 
          downEnough={100}
          isBlockContainer={true}
          action={this.state.action}
          handleAction={this.handleAction}
          hasMore={hasMore}
          className='ReactPullLoad'
          style={{height:this.state.screenHeight}}
          distanceBottom={100}>

          	<div>{this.props.children}</div>

        </ReactPullLoad>
      </div>
    )
  }
}
export default PullLoad